カスタム編集

Wijgrid では、beginEdit および endEdit メソッドを使用することで、グリッドの列にカスタムエディタを追加できます。セルに wijcalendar、wijcombobox などの別のウィジェットを追加して、編集操作をカスタマイズすることもできます。

次のサンプルスクリプトでは、a wijcombobox を Quantity 列に追加することで、ユーザーがコンボボックス内のさまざまな値のうち、1 つの値だけを選択できるようにします。

ライブウィジェット
スクリプト

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $('#wijgrid').wijgrid({ data: [ ['US', 'Ipsum LLC',63.57, 150, .11], ['Japan','Lorem Inc', 74.85, 100, .19], ['China','Dolor International', 29.86, 250, .20], ['Russia', 'Blandit Enterprises',81.68, 150, .25], ['India', 'Vivamus Services',76.30, 200, .12] ], columns: [ { headerText: "Country", dataType: 'string' }, { headerText: "ProductName", dataType: 'string' }, { headerText: "Unit Price", dataType: 'currency' }, { headerText: "Quantity (Custom Column)", dataType: 'number', dataFormatString: 'n0' }, { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' }, ], selectionMode: 'singleCell', editingMode: 'cell', beforeCellEdit: function(e, args) { switch (args.cell.cellIndex()) { case 3: // add combobox in the cell $('<input />') .width('100%') .val(args.cell.value()) .appendTo(args.cell.container().empty()) .wijcombobox({ data: [ { label: '100', value: '100' }, { label: '150', value: '150' }, { label: '200', value: '200' }, { label: '250', value: '250' } ], selectedValue: args.cell.value(), isEditable: false }) .focus(); args.handled = true break; } }, afterCellEdit: function(e, args) { switch (args.cell.cellIndex()) { case 0: args.cell.container().find('input').wijcombobox('destroy'); break; } } }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
                 data: [
         ['US', 'Ipsum LLC',63.57, 150, .11],
         ['Japan','Lorem Inc', 74.85, 100, .19],
         ['China','Dolor International', 29.86, 250, .20],
         ['Russia', 'Blandit Enterprises',81.68, 150, .25],
         ['India', 'Vivamus Services',76.30, 200, .12]
            ],

            columns: [
        
        { headerText: "Country", dataType: 'string' },
        { headerText: "ProductName", dataType: 'string' },
        { headerText: "Unit Price", dataType: 'currency' },
        { headerText: "Quantity (Custom Column)", dataType: 'number', dataFormatString: 'n0' },
        { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' },
        
            ],
            selectionMode: 'singleCell',
            editingMode: 'cell',
            beforeCellEdit: function(e, args) {
                switch (args.cell.cellIndex()) {
                    case 3:
                        // add combobox in the cell
                        $('<input />')
                            .width('100%')
                            .val(args.cell.value())
                            .appendTo(args.cell.container().empty())
                            .wijcombobox({
                               data: [
                                   { label: '100', value: '100' },
                                   { label: '150', value: '150' },
                                   { label: '200', value: '200' },
                                   { label: '250', value: '250' }
                                ],
                                selectedValue: args.cell.value(),
                                isEditable: false
                            })
                            .focus();
                        args.handled = true
                        break;
                }
            },
            afterCellEdit: function(e, args) {
                switch (args.cell.cellIndex()) {
                    case 0:
                        args.cell.container().find('input').wijcombobox('destroy');
                        break;
                }
            }
        });
    });
</script>